<template>
  <div class="WTZX">
    <div class="query">
      <el-row>
        <el-col :span="12" class="title"
          >大洋软件 &nbsp;&nbsp;|&nbsp;&nbsp;
          <span style="font-size: 20px">帮助中心</span></el-col
        >
        <el-col :span="12" style="text-align: center"
          ><el-input
            size="small"
            placeholder="关键字搜索"
            style="width: 300px"
            prefix-icon="el-icon-search"
            v-model="filterText"
          ></el-input>
        </el-col>
      </el-row>
    </div>
    <div class="main">
      <el-row>
        <el-col :span="4" class="_tree_box"
          ><el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :highlight-current="true"
            :filter-node-method="filterNode"
            ref="tree"
          ></el-tree
        ></el-col>
        <el-col :span="20" class="_text_box">
          <el-button
            title="观看视频"
            v-if="info.fileUrl"
            v-show="!isShow"
            type="success"
            icon="el-icon-video-camera-solid"
            circle
            class="vidio_open"
            @click="isShow = true"
          ></el-button>
          <div class="vidio_box" v-if="info.fileUrl" v-show="isShow">
            <div class="close" @click="vidio_close">X</div>
            <video
              style="width: 398px; height: 198px"
              :src="info.fileUrl"
              class="avatar video-avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video>
          </div>
          <div v-html="info.contents"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      HttpText: "",
      info: {},
      filterText: "",
      isShow: true,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getTreeData();
  },
  // 组件方法
  methods: {
    getTreeData() {
      this.$post(baseUrl.bzzxIp + "/T1/api/v1/HelpCenter/Home/GetTreeAll").then(
        (res) => {
          this.data = res.data;
        }
      );
    },
    handleNodeClick(val) {
      this.isLoading = true;
      console.log(val);
      this.$get(
        baseUrl.bzzxIp + "/T1/api/v1/HelpCenter/Home/GetItem?id=" + val.id
      ).then((res) => {
        this.info = res.data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    vidio_close() {
      this.isShow = false;
    },
  },
};
</script>

<style scoped lang="scss">
.WTZX {
  padding: 20px;
}
.query {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  .title {
    font-size: 22px;
    // color: #6bb1ec;
    color: blue;
  }
}
._tree_box {
  border-right: 1px solid #ccc;
  height: 600px;
  overflow: auto;
}
._text_box {
  height: 600px;
  padding: 10px 20px;
  overflow: auto;
}
.vidio_box {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 400px;
  height: 200px;
  background-color: #eee;
  border: 1px solid #000;
  .close {
    position: absolute;
    right: -10px;
    top: -20px;
    width: 22px;
    height: 22px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #000;
  }
}
.vidio_open {
  position: absolute;
  top: 20px;
  right: 30px;
}
</style>
